<template>
  <view>
    <view class="form">
      <view class="uni-form-item name">
        <view class="title">姓名：</view>
        <input class="uni-input" placeholder="请输入姓名" />
      </view>
      <view class="uni-form-item name">
        <view class="title">身份证号：</view>
        <input class="uni-input" placeholder="请输入身份证号码" />
      </view>
      <view class="uni-form-item id-card-upload">
        <view class="title">请上传身份证正面照：</view>
        <view class="id-card-front" style="margin: 20rpx 0;">
          <view v-if="form.idcardFrontUrl" class="image-preview">
            <view class="image-remove" @click="removePicture(1)">x</view>
            <image :src="baseUrl + form.idcardFrontUrl"></image>
          </view>
          <view v-else class="upload-button" @click="onChooseImage(1)">
            <uni-icons type="plusempty" size="80" color="gray"></uni-icons>
            <text style="margin-top: 10rpx;">上传人像面照片</text>
          </view>
        </view>
      </view>
      <view class="uni-form-item id-card-upload">
        <view class="title">请上传身份证背面照：</view>
        <view class="id-card-front" style="margin: 20rpx 0;">
          <view v-if="form.idcardBackUrl" class="image-preview">
            <view class="image-remove" @click="removePicture(2)">x</view>
            <image :src="baseUrl + form.idcardBackUrl"></image>
          </view>
          <view v-else class="upload-button" @click="onChooseImage(2)">
            <uni-icons type="plusempty" size="80" color="gray"></uni-icons>
            <text style="margin-top: 10rpx;">上传人像面照片</text>
          </view>
        </view>
      </view>
      <button @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          username: '',
          identityCard: '',
          idcardFrontUrl: '',
          idcardBackUrl: ''
        },
        baseUrl: uni.gRequest.file
      }
    },
    methods: {
      // 选择图片
      async onChooseImage(i) {
        const res = await uni.chooseMedia({
          count: 1,
          mediaType: 'image',
        })
        if (i == 1) {
          this.form.idcardFrontUrl = res.tempFiles[0].tempFilePath
        } else {
          this.form.idcardBackUrl = res.tempFiles[0].tempFilePath
        }
        this.uploadCard(this.form.idcardFrontUrl)
      },
      // 清除图片
      removePicture(i) {
        console.log(this.form);
        i == 1 ? (this.form.idcardFrontUrl = '') : (this.form.idcardBackUrl = '')
      },
      // 姓名验证
      usernameVerify() {
        return /^(?:[\u4e00-\u9fa5·]{2,16})$/.test(this.form.username)
      },
      // 身份证验证
      idCardVerify() {
        return /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(this.form
          .identityCard)

      },
      // 表单提交
      submit() {
        if (!this.usernameVerify()) return uni.showToast({
          title: '请输入有效姓名'
        })
        if (!this.idCardVerify()) return uni.showToast({
          title: '请输入有效身份证'
        })
        if (!this.form.idcardFrontUrl || !this.form.idcardBackUrl) return uni.showToast({
          title: '请上传有效身份证件照'
        })
        this.uploadCard(this.form.idcardFrontUrl)
        this.uploadCard(this.form.idcardBackUrl)
        // 数据上传
        // TODO
      },
      // 身份证上传到服务器
      uploadCard(idcardUrl) {
        // 调用 API 上传图片
        var userInfo = uni.getStorageSync('userInfo');
        wx.uploadFile({
          url: this.baseUrl + '/app/file/upload',
          filePath: idcardUrl,
          name: 'file',
          header: {
            Authorization: 'Bearer ' + userInfo.token,
          },
          success: (result) => {
            // 处理返回的 json 数据
            const data = JSON.parse(result.data)
            console.log(111, data);
            // 判断接口是否调用成功
            if (data.code !== 200) return wx.showToast({
              title: '上传图片失败!'
            })
            // 渲染数据
            // TODO 将form的临时图片地址换成线上地址
            idcardUrl == this.form.idcardFrontUrl ? this.form.idcardFrontUrl = data.fileName : this.form
              .idcardBackUrl = data.fileName
          },
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    height: 100vh;
    overflow: hidden;
    background-color: white;
  }

  .upload-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #7694b0;
    font-size: 30rpx;
  }

  .id-card-upload {

    .id-card-front,
    .id-card-back {
      height: 420rpx;
      margin: 20rpx 40rpx 0;
      border-radius: 10rpx;
      overflow: hidden;
      background-color: #fafafa;
    }

    .image-preview {
      height: 100%;
      position: relative;
    }

    .image-remove {
      width: 50rpx;
      height: 50rpx;
      text-align: center;
      line-height: 40rpx;
      position: absolute;
      right: 0;
      top: 0;
      color: #fff;
      border-radius: 0 20rpx 0 20rpx;
      background-color: rgba($color: #000000, $alpha: .6);

    }

    image {
      width: 100%;
      height: 100%;
    }

    .upload-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #7694b0;
      font-size: 30rpx;
    }

    .icon-add {
      font-size: 48rpx;
      margin-bottom: 10rpx;
    }
  }

  .form {
    padding: 30rpx 20rpx;

    .uni-form-item {
      min-height: 80rpx;
      padding: 10rpx;
      margin-bottom: 10rpx;
      border-bottom: 1rpx #eee solid;
    }

    .name {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        width: 200rpx;
        line-height: 100%;
      }

      .uni-input {
        flex: 1;
      }
    }
  }
</style>
